<template>
  <span class="upLoadBtn">
    <Button :loading="loading" :type="color" @click="handleUpload" :size="size">{{text}}</Button>
    <input :id="idName" type="file" :accept="accept" :multiple="multiple"  @change="handkeFileChange">
  </span>
</template>

<script type="text/ecmascript-6">
export default {
    name: 'upLoadBtn',
    props :{
      idName:{
        type:String,
        required:true,
        default(){
          return 'inputid'
        }
      },
      loading:{
        type:Boolean,
        default(){
          return false
        }
      },
      size:{
        type:String,
        default(){
          return 'small'
        }
      },
      accept:{
        type:String,
        default(){
          return '.jpg,.jpeg,.png,.pdf,.doc,.docx'
        }
      },
      text: {
        type:String,
        default(){
          return '上传'
        }
      },
      multiple: {
        type:Boolean,
        default(){
          return false
        }
      },
      color:{
        type:String,
        default(){
          return 'primary'
        }
      },
      row:{
        type:Object,
        default() {
          return null
        }
      }
    },
    methods:{
      handleUpload() {
        document.getElementById(this.idName).click()
      },
      handkeFileChange(e) {
        const files = e.target.files
        const itemFile = this.multiple?files:files[0] // only use files[0]
        if (this.row) {
          this.$emit('fileUpload',itemFile,this.row)
        }else {
          this.$emit('fileUpload',itemFile)
        }
      }
    }
}
</script>

<style lang="stylus">
.upLoadBtn
  display: inline-block
  input
    display: none
    z-index: -9999
</style>
